<!-- eslint-disable prettier/prettier -->
<template>
    <div>
        <main>
            <div class="right-side">
                <div class="doc">
                    <div class="title alt">检查更新，不自动下载</div>
                    <el-button type="primary" round @click="checkUpdate">检查更新不自动下载, 不可用于开发环境</el-button>
                    <el-button type="primary" round @click="download">手动下载更新文件</el-button>
                    <el-button type="primary" round @click="installApp">安装</el-button>

                    <el-progress :text-inside="true" :stroke-width="20" :percentage="percent"></el-progress>
                    {{ appInfo }}
                    <div>{{ messageStr }}</div>
                    <br>
                    <div>{{ progressObj }}</div>
                    <div>{{ percent }}</div>
                    <br>
                    <div>{{ errorObj }}</div>
                    <div>{{ installObj }}</div>
                </div>
            </div>
        </main>
    </div>
</template>

<script lang="ts">
import { ElMessageBox } from 'element-plus'
let ipcRenderer = window.electron.ipcRenderer;

export default {
  name: 'SystemExample',
  data() {
    return {
      percent: 0,
      show: 'true',
      appInfo: {},
      messageStr: '',
      progressObj: {},
      errorObj: {},
      installObj: {}
    }
  },
  mounted() {
    // 主进程返回检查状态
    ipcRenderer.on('message', (message) => {
      console.log('status--->', message)
    })

    // 更新进度
    ipcRenderer.on('downloadProgress', (progressObj) => {
      console.log('progressObj--->', progressObj)
    //   this.percent = progressObj.percent.toFixed(2) || 0

    //   console.log('this.percent---->', Math.trunc(this.percent))
    //   this.progressObj = progressObj
    })
    //接收更新的版本信息
    ipcRenderer.on('updateAvailable', (info) => {
      console.log('status--->', info)
      this.appInfo = info
    })
    //下载成功请求安装
    ipcRenderer.on('requestInstall', (info) => {
      this.installObj = info
      ElMessageBox.confirm('下载完成，是否立即更新', '提示', {
        closeOnClickModal: false, // 禁止点击遮罩关闭弹框
        closeOnPressEscape: false, // 禁止按 ECS 键关闭弹框
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.info('下载完成，选择立即更新')
          ipcRenderer.send('installApp')
        })
        .catch(() => {
          console.info('下载完成，选择取消更新')
        })
    })
    //下载错误
    ipcRenderer.on('installErr', (error) => {
      this.errorObj = error
    })
  },

  methods: {
    // 下面方法点击按钮开始检查更新，
    checkUpdate() {
      ipcRenderer.send('checkForUpdate')
    },
    //安装
    installApp() {
      ipcRenderer.send('installApp')
    },
    //下载
    download() {
      ipcRenderer.send('download')
    }
  }
}
</script>

<style scoped></style>
